<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>鼠标拖曳效果</title>
		<style>
        .hezi{
            position: absolute; 
            display: block;
            width: 300px;
            height: 280px;
            cursor: move;
            border: 4px solid darkgray;
        }
        .hezi .la{
        	width: 300px;
        	height: 33px;
        	line-height: 33px;
        	color: white;
        	background: #7c9299;
        }
        .hezi p{
        	position: absolute;
        	top:6px;
        	right: 2px;
        	color: white;
        	margin: 0 0;
        }
    </style>
	</head>
	<body>
		<div class="hezi" id="drag">
			<div class="la" id="lal">注册信息（可以拖曳） </div>
			<p>关闭</p>
		</div>
		 <script>
            window.onload = function() {
            	var lal=document.getElementById('lal');
                var drag = document.getElementById('drag');
                lal.onmousedown = function(e) {
                    var e = e || window.event; 
                    var diffX = e.clientX - drag.offsetLeft; 
                    var diffY = e.clientY - drag.offsetTop;
                    /*if(typeof drag.setCapture!='undefined'){
                        drag.setCapture();
                    }*/
                    document.onmousemove = function(e) {
                        var e = e || window.event; 
                        var left=e.clientX-diffX;
                        var top=e.clientY-diffY;
                        if(left<0){
                        }else if(left >window.innerWidth-drag.offsetWidth){
                            left = window.innerWidth-drag.offsetWidth;
                        }
                        if(top<0){
                        }else if(top >window.innerHeight-drag.offsetHeight){
                            top = window.innerHeight-drag.offsetHeight;
                        }
                        drag.style.left = left+ 'px';
                        drag.style.top = top + 'px';
                    };
                    document.onmouseup = function(e) {
                        this.onmousemove = null;
                        this.onmouseup = null;
                    };
                };
            };
        </script>
	</body>
</html>
